<template>
  <section id="contact" class="py-20 bg-gradient-to-br from-blue-50 to-teal-50">
    <div class="container mx-auto px-4">
      <!-- 标题添加渐入动画 -->
      <div class="text-center mb-16 animate-on-scroll opacity-0 translate-y-8 transition-all duration-700">
        <h2 class="text-3xl font-bold text-gray-800">联系我</h2>
      </div>
      
      <form class="max-w-2xl mx-auto space-y-6">
        <!-- 姓名输入 - 顺序动画 -->
        <input type="text" placeholder="请输入您的姓名" class="w-full p-3 bg-white border border-gray-200 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300 animate-on-scroll opacity-0 transition-all duration-700 delay-100">
        
        <!-- 邮箱输入 - 顺序动画 -->
        <input type="email" placeholder="请输入您的邮箱" class="w-full p-3 bg-white border border-gray-200 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300 animate-on-scroll opacity-0 transition-all duration-700 delay-200">
        
        <!-- 留言输入 - 顺序动画 -->
        <textarea placeholder="请输入您的留言" class="w-full p-3 bg-white border border-gray-200 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300 animate-on-scroll opacity-0 transition-all duration-700 delay-300" rows="4"></textarea>
        
        <!-- 发送按钮 - 动画和交互效果 -->
        <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-lg transition-all duration-300 transform hover:translate-y-[-2px] hover:shadow-lg active:translate-y-0 animate-on-scroll opacity-0 transition-all duration-700 delay-400 mb-10">
          发送消息
        </button>
      </form>
    </div>
  </section>
</template>

<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  // 创建IntersectionObserver实例检测元素是否进入视口
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        // 元素进入视口时添加active类触发动画
        entry.target.classList.add('opacity-100', '-translate-y-0');
        observer.unobserve(entry.target);
      }
    });
  }, {
    threshold: 0.1
  });

  // 观察所有带有animate-on-scroll类的元素
  document.querySelectorAll('.animate-on-scroll').forEach(el => {
    observer.observe(el);
  });
});
</script>

<style scoped>
/* 动画基础样式 */
.animate-on-scroll {
  transition-property: opacity, transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* 延迟类样式 */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }

/* 响应式调整 */
@media (max-width: 1024px) {
  .lg\:col-span-3, .lg\:col-span-2 { width: 100%; }
}
</style>